<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>凹凸文字</title>
    <style>
        .test-text {
            color: #4CD964;
            width: 200px;
            font-size: 16px;
            height: 60px;
            overflow-y: hidden;
        }

        .test-text.all {
            height: auto;
            color: #007AFF;
        }

    </style>

</head>

<body>

<input type="checkbox" id="check" onchange="clickZK(event)" style="position: absolute;clip: rect(0 0 0 0);"/>

<div class="test-text" id="div-test">
    它是用64个可打印字符表示二进制所有数据方法。由于2的6次方等于64，所以可以用每6个位元为一个单元，对应某个可打印字符。我们知道三个字节有24个位元，就可以刚好对应于4个Base64单元，即3个字节需要用4个Base64的可打印字符来表示（特殊情況）。在Base64中的可打印字符包括字母A-Z、a-z、数字0-9
    ，这样共有62个字符，此外两个可打印符号在不同的系统中一般有所不同。但是，我们经常所说的Base64另外2个字符是：“+/”。这64个字符，所对应表如下。
</div>
<label for="check" id="zyLabel">展开↓</label>

<script>

    function clickZK(e) {
        var el = document.getElementById('div-test');
        var flag = el.className.indexOf('all') === -1;
        var label = document.getElementById('zyLabel');
        if (flag) {
            el.className = 'test-text all';
            label.innerText = '收起↑';
        }
        else {
            el.className = 'test-text'
            label.innerText = '展开↓';
        }

    }


</script>

</body>

</html>